<?php
$down = "";
$up = "";
$time = "";
foreach ($statistic AS $el => $le) {

    $down .= ',' . $le->indata / 1048576;
    $up .= ',' . $le->outdata / 1048576;
    $time .= ",'" . $le->times . "'";
}

$_down = substr($down, 1);
$_up = substr($up, 1);
$_time = substr($time, 1);
?>
<script src="<?php echo site_url() . 'assets/js/highcharts.js' ?>"></script>
<script src="<?php echo site_url() . 'assets/js/exporting.js' ?>"></script>
<script>
    $(function () {


        $('#container').highcharts({
            chart: {
                type: 'area'
            },
            title: {
                text: 'Enthernet Traffic'
            },
            yAxis: {
                title: {
                    text: 'GB'
                },
                labels: {
                    formatter: function () {
                        return this.value / 1000;
                    }
                }
            }, plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                }
            }, xAxis: {
                categories: [<?php echo $_time ?>],
                plotBands: [{// visualize the weekend
                        from: 4.5,
                        to: 6.5,
                        color: 'rgba(68, 170, 213, .2)'
                    }]
            },
            tooltip: {
                pointFormat: '{point.y:,.0f} MB'
            },
            series: [{
                    name: 'Traffic Download',
                    data: [<?php echo $_down; ?>]
                },
                {
                    name: 'Traffic Upload',
                    data: [<?php echo $_up; ?>]
                }]
        });
    });</script>
<div id="container" style="min-width: 310px; height: 300px; margin: 0 auto"></div>